import ReactDOM from 'react-dom'
import { Component } from 'react'
// 类组件定义状态
class App extends Component {
  state = {
    count: 0,
    user: {
      name: 'jack',
      age: 18
    },
    list: ['电脑', '手机', '相机']
  }
  // 第三种解决this指向问题（建议使用第三种）
  // 定义的时候使用箭头函数
  handleClick = () => {
    // 修改数据
    // 1.提供一个函数setState ===>获取原数组===>修改数据
    this.setState({
      count: this.state.count + 1
    })
  }
  updateUser = () => {
    // 修改对象
    this.setState({
      user: {
        ...this.state.user,
        name: 'tony'
      }
    })
  }
  undateList = () => {
    // 修改数组
    this.setState({
      list: ['iPad', ...this.state.list, '电视机']
    })
  }
  render() {
    return (
      <div>
        <div >计数器:{this.state.count}</div>
        <button onClick={this.handleClick}>按钮+1</button>
        <hr />
        <div>用户信息</div>
        <div>姓名：{this.state.user.name}</div>
        <div>年龄：{this.state.user.age}</div>
        <button onClick={this.updateUser}>修改姓名</button>
        <hr />
        <div>购买商品</div>
        <ul>
          {this.state.list.map((item) => {
            return <li key={item}>{item}</li>
          })}
        </ul>
        <button onClick={this.undateList} >添加商品</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

